<template>
	<div class="main">
		<!--<div class="header_title">验证注册手机</div>-->
		<div class="register-form">
			<!-- 输入手机号-->
			<div class="phone">
				<van-field
					v-model="mobile"
					type="number"
					label="手机号"
					placeholder="请输入手机号"
					maxlength="11"
				/>
				<!-- 验证码 -->
				<van-field
					v-model="verifyCode"
					center
					clearable
					label="验证码"
					placeholder="请输入验证码"
				>
					<template #button>
						<van-button size="small" type="info" @click="_getCode"
							>获取验证码</van-button
						>
					</template>
				</van-field>
			</div>
			<!--<van-field
                v-model="verifyCode"
                type="number"
                label="验证码"
                maxlength="11"
            />-->
			<div style="margin: 20px">
				<van-button block type="info" @click="_confirmPhone">
					提交
				</van-button>
			</div>
		</div>
	</div>
</template>

<script>
import { Toast } from 'vant'

var wait = 60
export default {
	components: {},
	data() {
		return {
			code: '',
			mobile: '',
			verifyCode: '',
		}
	},
	methods: {
		// 获取验证码
		_getCode() {
			if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
				this.$toast('请输入正确的手机号')
				return
			}
			this.time()
			// 发送请求,用post方式
			const data = {
				mobile: this.mobile,
			}
			this.$axios
				.post('/Public/SendSms', data)
				.then((res) => {
					if (res.success) {
						console.log('获取成功')
					}
				})
				.catch((err) => {
					console.log('获取失败')
				})
		},
		// 倒计时
		time() {
			var that = this
			if (wait == 0) {
				that.code = ''
				wait = 60
			} else {
				that.code = wait + 's' + '重新发送'
				wait--
				setTimeout(function () {
					that.time()
				}, 1000)
			}
		},
		// 确认手机号码
		_confirmPhone() {
			if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
				this.$toast('请输入正确的手机号')
				return
			}
			if (!this.verifyCode) {
				this.$toast('请输入验证码')
				return
			}
			const data = {
				Mobile: +this.mobile,
				VerifyCode: +this.verifyCode,
			}
			Toast.loading({
				message: '加载中...',
				forbidClick: true,
			})
			this.$axios
				.post('/UserUser/ChangeMobile', data)
				.then((res) => {
					if (!res.success) return false
					Toast.success('修改成功')
					setTimeout(() => {
						this.$router.go(-2)
					}, 1500)
				})
				.catch((err) => {
					console.log('失败')
				})
		},
	},
}
</script>

<style lang="less" scoped>
/*.register-form {*/
/*    margin-top: 10px;*/
/*}*/
.phone {
	position: relative;

	.code {
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 12px;
	}
}
</style>

